<!-- 
	标题栏组件 
	1、标题栏背景：背景颜色、背景图片
	2、主标题：标题内容、文字大小、文字颜色、文字样式
	3、副标题：标题内容、文字大小、文字颜色、文字样式
-->
<template>
	<div class="component-wrapper" :style="wrapperStyle">
		<div v-if="data.showTitle" :style="titleStyle" class="title">{{ title }}</div>
		<div v-if="data.showSecondTitle" :style="secondTitleStyle" class="second-title">{{ secondTitle }}</div>
	</div>
</template>

<script>
	export default {
		name: 'u_title',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						// 标题栏背景设置
						previewColor: {
							// 标题栏背景类型 1=背景颜色 2=背景图片
							isColor: {
								type: String,
								default: '1'
							},
							// 背景颜色 isColor 为 1是取值
							color: {
								type: String,
								default: '#ffffff'
							},
							// 背景图片 isColor 为 2是取值
							image: {
								type: String,
								default: ''
							}
						},
						// 主标题是否显示  true 显示 false 不显示
						secondTitle: {
							type: Boolean,
							default: true
						},
						// 主标题内容
						title: {
							type: String,
							default: '标题'
						},
						// 主标题文字大小
						textSize: {
							type: Number,
							default: 16
						},
						// 主标题文字颜色
						textColor: {
							type: String,
							default: ''
						},
						// 主标题对齐方式
						textAlign: {
							type: String,
							default: 'center'
						},
						// 主标题文字样式 [0] 加粗 [1] 斜体
						textStyle: {
							type: Array,
							default: []
						},
						// 副标题是否显示  true 显示 false 不显示
						showSecondTitle: {
							type: Boolean,
							default: true
						},
						// 副标题内容
						secondTitle: {
							type: String,
							default: '副标题'
						},
						// 副标题文字大小
						secondTextSize: {
							type: Number,
							default: 12
						},
						// 副标题文字颜色
						secondTextColor: {
							type: String,
							default: ''
						},
						// 副标题对齐方式
						secondTextAlign: {
							type: String,
							default: 'center'
						},
						// 主标题文字样式 [0] 加粗 [1] 斜体
						secondTextStyle: {
							type: Array,
							default: []
						}
					}
				}
			}
		},
		computed: {
			/** 样式 */
			wrapperStyle() {
				if (this.data.previewColor) {
					const {
						previewColor,
						paddingTop,
						paddingBottom,
						paddingLeft,
						paddingRight,
					} = this.data;

					return `
		                width: 100%;
		                padding-top: ${paddingTop}px;
		                padding-bottom: ${paddingBottom}px;
		                padding-left: ${paddingLeft}px;
		                padding-right: ${paddingRight}px;
		                background-color: ${previewColor.color};
		                background-image: url(${previewColor.isColor == 2? previewColor.image: ''});
		                background-size: 100% auto;
		                bakcground-position: center;
		            `;
				}
			},

			/** 标题样式 */
			titleStyle() {
				const {
					textStyle,
					textAlign,
					textSize,
					textColor
				} = this.data;
				return `
		                font-weight: ${textStyle.includes('1')?'bold':''};
		                font-style: ${textStyle.includes('2')?'italic':''};
		                text-align: ${textAlign};
		                font-size: ${textSize}px;
		                color: ${textColor};
		            `;
			},

			/** 副标题样式 */
			secondTitleStyle() {
				const {
					secondTextStyle,
					secondTextAlign,
					secondTextSize,
					secondTextColor
				} = this.data;
				return `
		                font-weight: ${secondTextStyle.includes('1')?'bold':''};
		                font-style: ${secondTextStyle.includes('2')?'italic':''};
		                text-align: ${secondTextAlign};
		                font-size: ${secondTextSize}px;
		                color: ${secondTextColor};
		            `;
			},

			/** 标题 */
			title() {
				return this.data.title || '标题';
			},
			secondTitle() {
				return this.data.secondTitle || '副标题';
			},

		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.component-wrapper {
		display: block;
		max-width: 100%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		text-decoration: none;
	}
</style>
